<template>
    <el-container class="goods-view panel-block">
      <el-header class="sa-header">
        <div class="sa-title sa-flex sa-row-between">
          <div class="label sa-flex">
            <span class="left">自剪素材分类</span>
          </div>
          <div>
            <el-button  type="primary" icon="Plus" @click="addRow">添加分类</el-button>
          </div>
        </div>
      </el-header>
      <el-main class="sa-p-0">
        <div class="sa-table-wrap" v-loading="loading">
          <el-table
              height="100%"
              class="sa-table"
              :data="table.data"
              @selection-change="changeSelection"
              @sort-change="fieldFilter"
              row-key="id"
              stripe
          >
            <template #empty>
              <sa-empty></sa-empty>
            </template>
            <el-table-column label="" min-width="20"></el-table-column>
            
            <el-table-column min-width="40" type="expand">
                <template #default="scope">
                    <div class="sa-flex sa-m-l-16">
                        <sa-preview
                        :url="scope.row?.image"
                        size="32"
                        ></sa-preview>
                    </div>
                </template>
            </el-table-column>

            <el-table-column  prop="id" label="ID" min-width="80"></el-table-column>
            
            <el-table-column  prop="title" label="分类名称" min-width="80"></el-table-column>

           
            <el-table-column  prop="create_time" label="创建时间" min-width="80"></el-table-column>
          
            
            <el-table-column label="操作" min-width="160" fixed="right">
              <template #default="scope">
                <div class="sa-flex" style="flex-wrap: wrap;">
                  <el-button
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="uploadRow(scope.row)"
  
                  >上传素材
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <sa-view-bar>
        
        <template #right>
          <sa-pagination :pageData="pageData" @updateFn="getData"/>
        </template>
      </sa-view-bar>
    </el-container>
    
  </template>
  <script>
  export default {
    name: 'shop.admin.goods.goods',
  };
  </script>
  <script setup>
  import {onMounted, reactive, ref} from 'vue';
  import {api} from '../task.service';
  import {api as categoryApi} from '@/app/shop/admin/category/category.service';
  import {ElMessageBox} from 'element-plus';
  import {useModal, usePagination} from '@/sheep/hooks';
  import {useSearch} from '@/sheep/components/sa-table/sa-search/useSearch';
  import {composeFilter} from '@/sheep/utils';
  import {useRouter} from 'vue-router';
  
  import Edit from './edit.vue';

  import { useFile } from '@/sheep/hooks';
  
  import {useRoute} from 'vue-router';
  
  
  import {cloneDeep} from 'lodash';

  const route = useRoute();
  
  const router = useRouter();
  // getType
 
  
  
  // 新建
  function addRow() {
    useModal(
      Edit,
      { title: '添加分类', type: 'add' },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  const filterParams = reactive({
     tools: {},
     data: {},
    conditionLabel: {},
  });

  const {openFilter, deleteFilter} = useSearch({
    filterParams,
    getData,
  });

  
  const loading = ref(false);

  // 表格
  const table = reactive({
    data: [],
    order: null,
    sort: 'sort',
    selected: [],
  });
  
  const {pageData} = usePagination();
  
  // 获取数据
  async function getData(page,e) {
    loading.value = true;
    if (page) pageData.page = page;
    
    
    
    const {error, data} = await api.real.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
    });
    if (error === 0) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
    }
    loading.value = false;
  }
  
  // table 字段排序
  function fieldFilter({prop, order}) {
    table.order = order == 'ascending' ? 'asc' :( order == 'descending' ?'desc':null);
    table.sort = prop;
    getData();
  }
  
  // table 批量选择
  function changeSelection(row) {
    table.selected = row;
  }
  
  // 查看
  function uploadRow(row){
    useFile();
  }

  onMounted(() => {
   
    // getData();
  });
  </script>
  <style lang="scss">
  .el-tabs.sa-tabs::after{
    display: none;
  }
  .goods-dropdown {
    .status-up {
      color: var(--el-color-success);
    }
  
    .status-down {
      color: var(--el-color-danger);
    }
  
    .status-hidden {
      color: var(--el-color-info);
    }
  }
  </style>
  <style lang="scss" scoped>
  .el-upload {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    height: 32px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--el-button-text-color);
    text-align: center;
    box-sizing: border-box;
    outline: none;
    transition: 0.1s;
    font-weight: var(--el-button-font-weight);
    user-select: none;
    vertical-align: middle;
    -webkit-appearance: none;
    background-color: var(--el-button-bg-color);
    padding: 8px 15px;
    font-size: var(--el-font-size-base);
    border-radius: var(--el-border-radius-base);
  }
  
  .goods-view {
    .el-main {
      .sa-table-wrap {
        margin-left: -48px;
        overflow: hidden;
        height: 100%;
  
        :deep() {
          .el-table__empty-text {
            margin-left: 48px;
          }
        }
  
        .title {
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          color: var(--sa-font);
        }
  
        .subtitle {
          height: 16px;
          line-height: 16px;
          font-size: 12px;
          color: var(--sa-subfont);
        }
  
        .goods-tag {
          max-width: 76px;
          padding: 3px 8px;
          border-radius: 10px;
          line-height: 14px;
          font-size: 12px;
          font-weight: 400;
          margin-right: 8px;
          cursor: pointer;
  
          &:last-of-type {
            margin-right: 0;
          }
  
          &.promos-goods {
            color: #faad14;
            background: rgba(250, 173, 20, 0.16);
          }
  
          &.groupon_ladder-goods,
          &.groupon-goods {
            color: var(--el-color-primary);
            background: var(--t-bg-active);
          }
  
          &.seckill-goods {
            color: #ff4d4f;
            background: rgba(255, 77, 79, 0.16);
          }
        }
  
        .sku {
          width: fit-content;
          height: 20px;
          line-height: 1;
          display: inline-flex;
          align-items: center;
          padding: 0 8px;
          font-size: 12px;
          color: #fff;
          background: var(--el-color-primary);
          border-radius: 10px;
          cursor: pointer;
        }
  
        .stock {
          cursor: pointer;
  
          .add-stock {
            margin-left: 8px;
            color: var(--el-color-primary);
          }
        }
  
        .el-tag {
          padding: 0 8px;
          border: none;
          cursor: pointer;
  
          :deep() {
            .el-tag__content {
              display: flex;
              align-items: center;
            }
          }
        }
      }
  
      .sa-expand-table {
        :deep() {
          .el-table__header-wrapper {
            display: none;
          }
        }
  
        .sku-text {
          font-size: 12px;
          color: var(--sa-font);
        }
      }
    }
  
    .expand-arrow {
      color: #fff !important;
    }
  }
  </style>
  